<script>
/**关系型数据源 */

export default {
  name: 'RelationRes',
  data() {
    return {
      dataTitle: '', //数据标题
      dataType: '92200', //数据类型
      keyword: '', //过滤关键字
      dbs: [], //表空间
      dbTables: [], //数据表
      filterDbTables: [], //过滤后的数据源
      selectedTable: '', //选择的数据表
      data: null, //新增的数据
    };
  },
  watch: {
    //设置选择的数据表
    selectedTable(newVal) {
      this.data = this.dbTables.find(p => p.tablename == newVal);
    },
  },
  async created() {
    const response = await api.ETL.findDbList();
    this.dbs = response.data;
  },
  methods: {
    //切换表空间时更新数据表
    async dbChange(name) {
      const dbInfo = await api.ETL.findDbInfo({ dbname: name });
      const tables = await api.ETL.getAllTables(dbInfo.data);
      tables.data.forEach(p => (p.dbInfo = dbInfo.data)); //将数据库信息附加到数据表上
      this.filterDbTables = this.dbTables = tables.data;
      this.keyword = '';
      this.selectedTable = '';
    },
    //过滤数据表
    filterData() {
      if (this.keyword) {
        this.filterDbTables = this.dbTables.filter(p => p.tablename.indexOf(this.keyword) >= 0);
        this.selectedTable = '';
      } else {
        this.filterDbTables = this.dbTables;
      }
    },
    //校验数据
    validateData() {
      if (this.dataTitle == '') {
        this.$Message.warning('数据标题为必填项！');
        return false;
      }
      if (!this.data) {
        this.$Message.warning('请选择数据表！');
        return false;
      }
      return true;
    },
    //获取新增数据
    getAddedModel() {
      let newData = {
        name: this.dataTitle,
        dataType: this.dataType,
        data: {
          databaseInfo: JSON.stringify(this.data.dbInfo),
          sql: `select * from "${this.data.tablename}" `,
        },
        createTime: new Date(),
      };
      return newData;
    },
  },
};
</script>

<template>
  <div class="relation-res-host">
    <h2>关系数据源</h2>
    <Row>
      <Col span="6">
      <span>数据标题：</span>
      </Col>
      <Col span="18">
      <Input v-model="dataTitle"></Input>
      </Col>
      </Col>
    </Row>
    <Row>
      <Col span="6">
      <span>选择表空间：</span>
      </Col>
      <Col span="18">
      <Select @on-change="dbChange">
        <Option
          v-for="item in dbs"
          :value="item.name"
          :key="item.name">
          {{ item.name }}
        </Option>
      </Select>
      </Col>
    </Row>
    <Row>
      <Col span="6">
      <span>过滤数据表：</span>
      </Col>
      <Col span="18">
      <Input
        v-model="keyword"
        placeholder="输入表名按Enter键搜索..."
        icon="search"
        @keyup.native.enter="filterData"></Input>
      </Col>
    </Row>
    <Row>
      <div
        v-if="dbTables.length>0"
        class="rel-tables">
        <RadioGroup
          v-model="selectedTable"
          vertical>
          <Radio
            v-for="item in filterDbTables"
            :key="item.tablename"
            :label="item.tablename">
          </Radio>
        </RadioGroup>
      </div>
    </Row>
  </div>
</template>

<style lang="less" scoped>
.relation-res-host {
  padding: 5px;
  .k-row {
    margin-top: 20px;
    .k-col:first-child {
      margin-top: 5px;
    }
  }
}

.rel-tables {
  height: 250px;
  overflow-y: auto;
  border: 1px solid #dddee1;
  border-radius: 2px;
  padding: 5px 10px;
}
</style>
